<template>
  <u-dialog title="待入职确认" :show.sync="show" :auto-close="false" @cancel="cancel" @confirm="confirm" width="1080px">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="120px">

      <el-descriptions :column="1" border>
        <el-descriptions-item label="工号">
          {{ dataForm.jobNo }}
        </el-descriptions-item>
        <el-descriptions-item label="姓名">
          {{ dataForm.name }}
        </el-descriptions-item>
        <el-descriptions-item label="领用单" :span="2">
          <el-image style="width: 200px; height: 200px;" :src="dataForm.receipt" :preview-src-list="handleThumbs(dataForm.receipt)" />
        </el-descriptions-item>
        <el-descriptions-item label="押金条" :span="2">
          <el-image style="width: 200px; height: 200px;" :src="dataForm.depositFile" :preview-src-list="handleThumbs(dataForm.depositFile)" />
        </el-descriptions-item>
      </el-descriptions>

    </el-form>
  </u-dialog>
</template>

<script>
export default {
  name: 'Approval',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: data => {
        return ({})
      }
    }
  },
  data() {
    return {
      api: this.$u.api.PluginsGuide,
      dataForm: {},
      rules: {}
    }
  },
  watch: {
    show(newVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        const d = {
          result: 'agree',
          remark: ''
        }
        this.dataForm = this.$u.deepMerge(d, this.data)
        // 清除表单验证状态
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
        // this.$nextTick(() => {
        //   if (this.$refs.dataForm) {
        //     this.$refs.dataForm.clearValidate()
        //   }
        // })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      const { id, result, remark } = self.dataForm
      const d = { id, result, remark }

      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          // 效验数据格式
          self.api.approval(d).then(() => {
            // 通知信息
            self.$u.msg('入职成功')
            // 关闭弹窗状态
            self.$emit('changeShow', false)
            // 更新成功后传递
            self.$emit('change')
          })
        }
      })
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    },
    // 获取第一张图片
    handleThumbs(thumb) {
      return thumb? thumb.split(',') : []
    }
  }
}
</script>
